<template>
  <div class="page-wrapper">
    <a-list :data-source="announceListData">
      <template #renderItem="{ item }">
        <div class="announce-item">
          <a-flex :style="{ marginBottom: '16px' }" align="center">
            <img src="/@/assets/images/h5/icon-announce.png" alt="" :style="{ marginRight: '5px' }" />
            <span class="announce-title">{{ item.title }}</span>
          </a-flex>
          <div class="announce-content">{{ item.content }}</div>
          <div class="announce-content">...</div>
          <a-flex :style="{ marginTop: '16px' }" justify="space-between" align="center">
            <div :style="{ color: '#A1A4AB', fontSize: '12px', lineHeight: '17px' }">{{ item.datetime }}</div>
            <div :style="{ color: '#fd436a' }">立即查看&gt;</div>
          </a-flex>
        </div>
      </template>
    </a-list>
  </div>
</template>

<script setup lang="ts">
  const announceListData = new Array(10).fill(0).map((_, i) => {
    const targetDate = new Date();
    targetDate.setDate(new Date().getDate() - i - 1);
    return {
      title: '震惊，今日公告已发布，走过路过不要错过！',
      content: '亲爱的用户：',
      datetime: [
        targetDate
          .toLocaleDateString()
          .split('/')
          .map(($) => $.padStart(2, '0'))
          .join('-'),
        ['18', String(Math.floor(Math.random() * 60)), String(Math.floor(Math.random() * 60))].map(($) => $.padStart(2, '0')).join(':'),
      ].join(' '),
    };
  });
</script>

<style lang="less" scoped>
  .page-wrapper {
    height: 100%;
    overflow-y: auto;
    background-color: #f3f3f3;
  }
  .page-wrapper::-webkit-scrollbar {
    display: none;
  }
  .announce-item {
    margin: 16px;
    padding: 12px 20px;
    border-radius: 10px;
    background-color: #ffffff;
    .announce-title {
      font-size: 15px;
      line-height: 26px;
      font-weight: bolder;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #000000;
    }
    .announce-content {
      font-size: 12px;
      line-height: 16px;
      height: 16px;
    }
  }
</style>
